<template>
    <div>
        <h1>vue绑定样式</h1>
        <!-- 
            vue绑定样式分类两大类，分别是对类样式操作，对行内样式操作
            一.绑定类样式
            可以使用v-bind:class="动态的类名"
            1、字符串写法
            2、数组写法
            3、对象写法  
            二、绑定行内样式
            可以使用v-bind:style="",具体的写法有两种
            1、对象写法
            2、数组写法
         -->
         <div class="box" v-bind:class="classStyle"></div>
         <hr>
         <div class="box" :class="['c1','c3','c4','c5']">Vue</div>
         <hr>
         <div class="box" :class="objClass">Vue</div>
         <hr>
         <div class="box" v-bind:style="{backgroundColor:colorVal,border:borderStyle}"></div>
         <hr>
         <div class="box" :style="objectStyle"></div>
         <hr>
         <div class="box" :style="[objectStyle,objectStyle2,objectStyle3]">vue</div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            classStyle:'c1',
            objClass:{
                c2:true,
                c3:true,
                c4:true,
                c5:true,
                c6:true
            },
            colorVal:'springgreen',
            borderStyle:'2px dashed gray',
            objectStyle:{
                backgroundColor:'skyblue',
                border:'3px dotted yellow'
            },
            objectStyle2:{
                textAlign:'center',
                lineHeight:'100px'
            },
            objectStyle3:{
                color:'red'
            }
        }
    }
}
</script>

<style lang="scss">
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 50%;
    }
    .c1{
        background-color:orange;
    }
    .c2{
        background-color:gray;
    }
    .c3{
        text-align:center;
    }
    .c4{
        line-height: 100px;
    }
    .c5{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        font-style: italic;
        font-size: 28px;
    }
    .c6{
        color:white
    }
</style>